<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="讨论详情"></uni-navbar></view>

		<view class="detail_con">
			<view class="con_title">
				<text class="t_tit">{{ issueInfo.issue }}</text>
			</view>
			<view class="con_status">
				<text class="status_node st_end" v-if="issueInfo.nodeStatus == 2">已结束</text>
				<text class="status_node st_tlz" v-else>讨论中</text>
				<text class="status_node st_gly" v-if="issueInfo.isVisible == 0">仅管理员可见</text>
				<text class="s_length">共{{ issueInfo.contentCount }}个回答</text>
			</view>
		</view>

		<view class="con_yt_detail">
			<view class="a_con_item" v-for="(item, index) in issueList" :key="item.id">
				<view class="a_con_status">
					<image class="status_img" :src="$imagePreview(item.touxiang)" mode="aspectFill"></image>
					<text class="status_name">{{ item.userName }}</text>
					<text class="status_lb">{{ item.jiebie }}</text>
					<view class="dz_img" @click="toAddLike(item)"><u-icon name="thumb-up" :color="item.isLike == 0 ? '#999' : '#f00'" size="32"></u-icon></view>
					<text class="status_dz_num" :style="'color:' + (item.isLike == 0 ? '#999' : '#f00')">{{ item.likeNum }}</text>
				</view>
				<view class="a_con_content">
					<uni-parse :content="item.content"></uni-parse>
					<!-- <u-read-more :ref="'uReadMore' + index" :key="index">
						<uni-parse :content="item.content"></uni-parse>
						<u-parse :html="item.content" @load="parseLoaded('uReadMore' + index)"></u-parse>
					</u-read-more> -->
				</view>
				<view class="a_tlz_p">{{ item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</view>
			</view>
			<u-loadmore :status="loading" />
		</view>

		<u-form-item class="form-item" left-icon="edit-pen" :border-bottom="false" v-if="issueInfo.nodeStatus != 2">
			<u-input inputAlign="left" v-model="content" type="text" :focus="true" placeholder="写回答..." style="width: 100%;" />
			<u-button slot="right" type="error" size="medium" @click="submit">发送</u-button>
		</u-form-item>
		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import uniParse from '@/components/uni-parse/parse.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniParse
	},
	data() {
		return {
			scrollTop: 0,
			id: '',

			issueInfo: '',
			issueList: '',
			content: '',
			loading: 'loadmore'
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.loadData();
	},
	onPullDownRefresh() {
		this.loadLogin();
		this.loadData();
	},
	onReachBottom() {
		if (this.loading == 'loadmore') this.loadList('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.currentUserId = this.userInfo.sysUser.id;

				this.pageNum = 1;
				this.pageSize = 10;
			} else {
				this.$logout();
			}
		},
		loadData() {
			this.$request('/wlyz/issue/query/' + this.id, '', {
				load: true
			}).then(res => {
				this.issueInfo = res.data.wlyzIssue;
			});
			this.loadList('refresh');
		},
		loadList(type = 'add') {
			if (type == 'add') {
				if (this.loading == 'nomore') {
					return false;
				}
				this.loading = 'loading';
			} else {
				this.loading = 'loading';
			}
			if (type != 'add') {
				this.pageNum = 1;
			}

			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				clientCode: this.clientCode,
				issueId: this.id,
				currentUserId: this.currentUserId,
				wlyzIssueContent: {}
			};
			this.$request('/wlyz/issue/content/list', data).then(res => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.issueList = [];
				}
				this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
				this.pageNum = this.pageNum + 1;
				this.issueList = this.issueList.concat(res.data.records);
				// if (this.$refs.uReadMore) {
				// 	this.$nextTick(() => {
				// 		if (this.$refs.uReadMore) {
				// 			this.$refs.uReadMore.forEach(item => {
				// 				item.init();
				// 			});
				// 		}
				// 	});
				// }
				this.loaded = true;
				if (this.issueList.length <= 0) {
					this.loading = 'nodata';
				}
			});
		},
		toAddLike(item) {
			let like = '1';
			if (item.isLike == 1) {
				like = '0';
			}
			let data = {
				wlyzIssueContentLike: {
					clientCode: item.clientCode,
					contentId: item.id,
					createBy: item.createBy,
					isLike: like
				}
			};
			this.$request('/wlyz/issue/content/like/add', data).then(res => {
				this.$msg(res.msg);
				if (like == '0') {
					item.isLike = 0;
					item.likeNum--;
				} else {
					item.isLike = 1;
					item.likeNum++;
				}
			});
		},
		parseLoaded(uReadMore) {
			this.$refs[uReadMore][0].init();
		},
		submit() {
			if (!this.content) {
				this.$msg('提交内容不能为空！');
				return false;
			}
			let data = {
				content: this.content
			};
			this.$request('/msg_sec_check/content', data, {
				load: true
			}).then(res => {
				if (res.data) {
					this.sendContent();
				} else {
					this.$msg('包含敏感词汇！');
				}
			});
		},
		sendContent() {
			let data = {
				wlyzIssueContent: {
					clientCode: this.clientCode,
					issueId: this.id,
					createBy: this.currentUserId,
					content: this.content
				}
			};
			this.$request('/wlyz/issue/content/add', data, {
				load: true
			}).then(res => {
				this.content = '';
				this.issueInfo.contentCount++;
				this.$msg(res.msg);
				this.loadList('refresh');
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	padding-bottom: 94rpx;
}

.detail_con {
	padding: 0 30rpx;
	color: #333333;
	border-bottom: 4rpx solid #f1f2f3;
	background-color: #fff;

	.con_title {
		padding: 30rpx 0;
		width: 100%;
		height: auto;
		font-size: 36rpx;
	}

	.con_status {
		display: flex;
		align-items: center;
		font-size: 13px;
		padding-bottom: 20rpx;

		.s_length {
			margin-left: auto;
			color: #666666;
			font-size: 14px;
			line-height: 1.5;
		}
	}
}

.con_yt_detail {
	font-size: 14px;
	color: #333333;
	line-height: 1.2;
	background-color: #fff;

	.a_con_item {
		padding: 14rpx 30rpx 26rpx;
		border-bottom: 1rpx solid #f1f2f3;
	}

	.a_con_status {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 14px;
		color: #999;
		line-height: 50rpx;

		.status_img {
			margin-right: 12rpx;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #f1f2f3;
		}

		.status_name {
			margin-right: 12rpx;
		}

		.status_lb {
			// margin-left: 20rpx;
		}

		.status_dz_num {
			// margin-left: auto;
		}

		.dz_img {
			margin-left: auto;
			padding-left: 20rpx;
			width: 56rpx;
		}
	}

	.a_con_content {
		margin-bottom: 12rpx;
		font-size: 16px;
		line-height: 1.4;
		white-space: pre-line;
	}

	.a_tlz_p {
		font-size: 13px;
		color: #999;
	}
}

.form-item {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 10rpx 30rpx;
	border-top: 4rpx solid #f1f2f3;
	background-color: #fff;

	/deep/ .u-form-item {
		padding: 0 !important;
	}

	/deep/ .u-form-item--left__content {
		padding: 0 !important;
	}
}

.status_node {
	display: inline-block;
	line-height: 1;
	padding: 8rpx 20rpx;
	font-size: 13px;
}
.st_end {
	color: #999;
	border: 1rpx solid #999;
	border-radius: 10rpx;
}
.st_tlz {
	color: #ff0000;
	border: 1rpx solid #ff0000;
	border-radius: 10rpx;
}
.st_gly {
	margin-left: 10rpx;
	color: #ce1617;
	border: 1rpx solid #ce1617;
	border-radius: 10rpx;
}
</style>
